<template>
    <div class="toggle-content" ref="modalRef">
        <div class="title-content">
            <div
                class="item-title"
                v-for="(item, index) in props.data"
                :key="index"
                @click="onTitle(item.code)"
                :class="{ active: showId === item.code }"
            >
                <span>
                    {{ item.name }}
                </span>
                <i class="iconfont icon-down" />
            </div>
        </div>
        <template v-for="(item, index) in props.data" :key="index">
            <!-- <div class="select-content"  v-if="showId === item.code" :key="index"> -->
            <div class="select-content" :class="{ show: showId === item.code }">
                <div
                    class="item"
                    @click="onSelectTagAll(item.code, item.multiple)"
                    :class="{
                        active: getIsAllSelect(item.code, item.multiple),
                    }"
                >
                    全部
                </div>
                <div
                    class="item"
                    v-for="(_item, _index) in item.options"
                    :key="_index"
                    :class="{
                        active: getIsSelect(
                            item.code,
                            _item.value,
                            item.multiple
                        ),
                    }"
                    @click="
                        onSelectTag(
                            _item.value,
                            item.code,
                            _item.label,
                            item.multiple
                        )
                    "
                >
                    {{ _item.label }}
                </div>
            </div>
        </template>
    </div>
</template>
<script setup>
import { ref } from "vue";
import { onClickOutside } from "@vueuse/core";

const props = defineProps({
    data: {
        type: Array,
        default: () => [],
    },
    select: {
        type: Object,
        default: () => {},
    },
});

const showId = ref(null);
const modalRef = ref(null);

onClickOutside(modalRef, () => {
    showId.value = null;
});

//点击标题
const onTitle = (code) => {
    if (showId.value === code) showId.value = null;
    else showId.value = code;
};

//判断选项是否选中
const getIsSelect = (code, val, multiple) => {
    const _values = props.select[code].value || "";
    if (multiple && _values && _values.includes(val)) return true;
    if (_values && _values === val) return true;
    return false;
};

//判断全部是否选中
const getIsAllSelect = (code, multiple) => {
    const _values = props.select[code].value || "";
    if (multiple && _values && !_values.length) return true;
    if (!multiple && !_values) return true;
    return false;
};

const emits = defineEmits(["selectTag", "selectTagAll"]);

const onSelectTag = (val, code, label, multiple) => {
    emits("selectTag", val, code, label, multiple);
};

const onSelectTagAll = (code, multiple) => {
    emits("selectTagAll", code, multiple);
};
</script>
<style lang="less" scoped>

.toggle-content {
    flex: 1;
    padding-bottom: 4px;
    .title-content {
        display: flex;
        .item-title {
            height: 26px;
            line-height: 26px;
            padding: 0 12px;
            display: flex;
            align-items: center;
            cursor: pointer;
            margin-right: 10px;
            transition: all 0.25s ease-in-out;
            box-sizing: border-box;
            border: 1px solid transparent;
            position: relative;
            &:last-child {
                margin-right: 0;
            }
            &::after {
                content: "";
                position: absolute;
                bottom: -2px;
                left: 0;
                right: 0;
                height: 0;
                width: 100%;
                background: var(--bg-color-1);
                z-index: 103;
                transition: all 0.2s ease-in-out;
            }
            &.active {
                color: var(--primary-color);
                background: var(--bg-color-1);
                border-color: var(--border-color);
                border-bottom-color: var(--bg-color-1);
                border-top-left-radius: 2px;
                border-top-right-radius: 2px;
                svg {
                    transform: rotate(180deg);
                }
                &::after {
                    height: 2px;
                }
            }
            svg {
                transition: all 0.25s ease-in-out;
                width: 13px;
                font-weight: 600;
                color: #777;
                margin-left: 6px;
            }
            &:hover {
                color: var(--primary-color);
            }
        }
    }
    .select-content {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding: 8px 20px 16px;
        position: absolute;
        background: var(--bg-color-1);
        left: 30px;
        right: 0;
        z-index: 10;
        transform: scaleY(0);
        transform-origin: center top;
        // box-shadow: 3px 3px 10px rgba(153, 153, 153, 0.3);
        transition: all 0.2s ease-in-out;
        border-radius: 2px;
        z-index: 100;
        &.show {
            transform: scaleY(1);
        }
        &::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border: 1px solid var(--border-color);
            pointer-events: none;
            border-radius: 2px;
        }
        .item {
            line-height: 24px;
            height: 24px;
            margin-right: 10px;
            margin-top: 8px;
            padding: 0 10px;
            border-radius: 2px;
            cursor: pointer;
            color: var(--text-color-base);
            transition: all 0.2s ease-in-out;
            &:hover {
                background: var(--primary-color);
                color: #fff;
            }
            &.active {
                background: var(--primary-color);
                color: #fff;
            }
        }
    }
}
</style>
